<template>
  <div class="departments">
    <!-- 卡片容器 -->
    <el-card class="mycard">
      <!-- 顶部导航 -->
      <el-tabs v-model="activepane">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 注册组件 -->
        <treetool :data="comDate" class="myborder" @openadd="openAdd"></treetool>
        <!-- 内容 - 子部门 -->
        <el-tree class="mytree" :data="data" default-expand-all>
          <!-- 使用组件@updatedata='getDepList'把父组件中的刷新页面数据方法传递给子组件，@openadd="openAdd"控制新增面板显示，@openedit='openedit'控制编辑面板显示 -->
          <treetool
           
            :data="data"
            slot-scope="{ data }"
            @updatedata="getDepList"
            @openadd="openAdd"
            @openedit='openedit'
          ></treetool>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增部门组件，把定义好的showAdd传给子组件adddept, @cancelSpan='showAdd=$event'接收到子组件中传递的数据showAdd修改它的状态$event就是子组件中传递的参数事件对象-->
    <!-- <adddept :addShow="showAdd" @cancelSpan="showAdd = $event"></adddept> -->
    <!-- 使用.sync简写                把要添加部门的父级id传入给新增页面   ref='myadddept' 获取到的是adddept的组件的对象-->
      <adddept :addShow.sync="showAdd" :pid='pid' @refurbish='getDepList'  ref='myadddept' ></adddept>
  </div>
</template>

<script>
// 导入treetool组件
import treetool from "./components/treetool";
// 导入新增面板组件
import adddept from "./components/adddept";
// 导入组织架构请求
import { getDepListApi } from "@/api/departments";
export default {
  data() {
    return {
      activepane: "first",
      //定义一个空数组用来保存获取到的数据
      data: [],
      comDate: {
        label: "江苏传智播客教育科技股份有限公司",
      },
      // 新增面板的值默认为影藏
      showAdd: false,
      // 定义一个用来保存父级的id
      pid:''
    };
  },
  // 注册组件
  components: {
    treetool,
    // 组成新增部门组件
    adddept

  },
  // 声明一个方法用来渲染组织架构数据
  methods: {

    // 定义一个展开查询面板的方法
    openedit(id){
      // 把编辑面板的状态改为true
      this.showAdd=true
      // 调用adddept中的方法
      this.$refs.myadddept.getDeptDetail(id)
    },
    // 定义一个新增面板的显示与隐藏的方法
    openAdd(id) {
      // 把新增面板的状态改为显示
      this.showAdd = true;
      // 接收父级的id
      this.pid=id
    },

    // 方便用户多个地方调用
    async getDepList() {
      // 捕获错误
      try {
        // 发送请求
        let res = await getDepListApi();
        // 保存数据
        // this.data = res.data.data.depts;
        // 把处理好的数据交给this.data
        this.data = this.trunData(res.data.data.depts, "");
        // 将数据中的第一数组赋值给头部
        this.comDate = res.data.data.depts[0];
        // 将头部第一条数据的manager值改为责任人
        this.comDate.manager = "责任人";
        // 定义一个属性isHead，用来判断头部与内容区的显示与隐藏
        this.comDate.isHead = true;
        // 捕获到错误
      } catch (err) {
        // 将捕获到的错误返回
        console.log(err.message);
      }
    },

    // 定义一个转换器方法
    trunData(arr, pid) {
      // 定义一个空数组
      const newArr = [];
      // 遍历传进来的数组
      arr.forEach((item) => {
        // 判断拿到一级的数据
        if (item.pid === pid) {
          // 在调用此方法但此时传的第二个参数是id
          const children = this.trunData(arr, item.id);
          // 判断一下children的长度大于0进行赋值
          if (children.length > 0) {
            // 把children赋值给item的children
            item.children = children;
          }
          // 把数据追加到数组中
          newArr.push(item);
        }
      });
      // 返回这个数组
      return newArr;
    },
  },

  // 页面一打开就渲染数据
  created() {
    this.getDepList();
  },
};
</script>

<style lang="scss">
.departments {
  margin: 30px;
  .mycard {
    padding: 20px 40px;
  }
  .content {
    padding: 30px 40px;

    .myborder {
      border-bottom: 2px solid #ccc;
    }
    .mytree {
      margin-top: 20px;
    }
  }
}
</style>
